<template>
	<view class="flex-col page">
		<view class="justify-center group">
			<image @click="Back()"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
				class="image" />
			<text class="text">订单详情</text>
		</view>
		<scroll-view scroll-y="true" class="scroll">
			<!-- 待支付 -->
			<view class="flex-col section_1" v-if="order_info.ordersStatus==1">
				<view class="justify-between group_1">
					<view class="flex-col items-start group_2">
						<text class="text_1">订单待付款</text>
						<text
							class="text_2">剩余时间：{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}:{{ timeData.minutes >10? timeData.minutes:'0'+timeData.minutes}}:{{ timeData.seconds }}</text>
						<u-count-down :time="newtimes" format="DD:HH:mm:ss" autoStart millisecond @change="onChange"
							v-show="false" />
					</view>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836666527088575.png"
						class="image_1" />
				</view>
			</view>
			<!-- 进行中 -->
			<view class="flex-col section_1" v-else-if="order_info.ordersStatus==3">
				<view class="justify-between group_1">
					<text class="text_1">订单进行中</text>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836631818215045.png"
						class="image_1" />
				</view>
			</view>
			<view class="flex-col section_1" v-else>
				<view class="justify-between group_1">
					<text class="text_1">订单已完成</text>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836631818215045.png"
						class="image_1" />
				</view>
			</view>
			<!-- 进行中 -->
			<view class="flex-col section_1" v-else-if="order_info.ordersStatus==3">
				<view class="justify-center group">
					<image @click="Back()"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
						class="image" />
					<text class="text">订单详情</text>
				</view>
				<view class="justify-between group_1">
					<text class="text_1">订单进行中</text>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836631818215045.png"
						class="image_1" />
				</view>
			</view>
			<view class="flex-col section_1" v-else>
				<view class="justify-center group">
					<image @click="Back()"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
						class="image" />
					<text class="text">订单详情</text>
				</view>
				<view class="justify-between group_1">
					<text class="text_1">订单已完成</text>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836631818215045.png"
						class="image_1" />
				</view>
			</view>

			<view class="flex-col section_2">
				<view class="flex-row">
					<view class="section_3">
						<!--*-->
					</view>
					<text class="text_3">主材询价订单</text>
				</view>
				<view class="justify-between group_4">
					<text class="text_4">你的房屋位置</text>
					<text
						class="text_5">{{order_info.cityName}}{{order_info.districtName}}{{order_info.position}}</text>
				</view>
				<view class="justify-between group_5">
					<text class="text_6">你的房屋面积</text>
					<text class="text_7">{{order_info.roomArea}}m²</text>
				</view>
				<view class="justify-between group_6">
					<text class="text_8">房屋类型</text>
					<text class="text_9">{{order_info.roomTypeName}}</text>
				</view>
			</view>
			<view class="flex-col section_4">
				<view class="flex-col">
					<view class="flex-row group_8">
						<view class="section_3">
							<!--*-->
						</view>
						<text class="text_10">主材询价类别</text>
					</view>
					<text class="text_11" v-if="allArray.consultingTypeId==0">线上视频</text>
					<text class="text_11" v-else>线下沟通</text>
					<text class="c11" v-if="order_info.ordersStatus==3">剩余时间：{{allArray.consultingTime}}小时</text>
					<text class="c11" v-else-if="order_info.ordersStatus==4" style=" color: #666666;">已完成</text>
				</view>
				<view class="flex-col group_9">
					<view class="justify-between group_10">
						<text class="text_12">选材咨询（{{allArray.consultingTime}}小时）</text>
						<text class="text_13">{{order_info.roomArea}}元/m²</text>
					</view>
					<view class="flex-col group_11">
						<view class="justify-between">
							<text class="text_14">总额</text>
							<text class="text_15">￥{{order_info.totalMoney}}</text>
						</view>
						<view class="justify-between group_13">
							<text class="text_16">优惠券</text>
							<text class="text_17">-￥{{allArray.couponsAmount}}</text>
						</view>
						<view class="justify-end group_14">
							<text class="text_18">应付款:</text>
							<view class="group_15">
								<text class="text_19">￥</text>
								<text class="text_20">{{order_info.payableMoney}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_5 ">
				<view class="flex-row group_16">
					<view class="section_3 view_2">
						<!--*-->
					</view>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621826750433.png"
						class="image_2" />
				</view>
				<view class="flex-col group_17">
					<view class="flex-row">
						<text class="text_21">订单编号</text>
						<text class="text_22">{{order_info.ordersNumber}}</text>
						<text class="text_23"
							style="color: #1c4ca8;font-family:.AppleSystemUIFont;font: size 12px;margin-left:140rpx"
							@click="copys">复制</text>
					</view>
					<!-- <text class="text_23">复制</text> -->
					<view class="flex-row group_19">
						<text class="text_24">下单时间</text>
						<text class="text_25">{{order_info.ordersTime}}</text>
					</view>
				</view>
				<view class="flex-row group_20">
					<text class="text_26">联系方式</text>
					<text class="text_27">{{allArray.phonenumber}}</text>
				</view>

				<view class="flex-row group_20" v-if="order_info.ordersStatus != 1">
					<text class="text_26">付款金额</text>
					<text class="text_27">{{order_info.payableMoney}}</text>
				</view>
				<view class="flex-row group_20 marginTop" v-if="order_info.ordersStatus != 1">
					<text class="text_26">支付方式</text>
					<text class="text_27" v-if="order_info.payType==1">微信支付</text>
					<text class="text_27" v-if="order_info.payType==2">支付宝支付</text>
				</view>
				<view class="flex-row group_20" v-if="order_info.ordersStatus != 1">
					<text class="text_26">支付时间</text>
					<text class="text_27">{{order_info.payTime}}</text>
				</view>
			</view>
			<view class="justify-between section_6">
				<view class="flex-row group_21" @click="go('/pages/my/message/kefu')">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
						class="image_3" />
					<text class="text_28">联系客服</text>
				</view>
				<view class="flex-col items-center image-wrapper" v-if="order_info.ordersStatus==1" @click="togos()">
					<text class="goPay">去付款</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				order_id: '',
				order_info: {},
				consulting: {},
				timeData: {},
				newtimes: 0,
				minutes: '',
				allArray: {},
				lefttime: 0,
			};
		},
		onPullDownRefresh() {
			console.log('rrrr');
			this.orderInfo();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(e) {
			this.order_id = e.ordersId
		},
		onShow() {
			this.orderInfo()
		},
		methods: {
			Back() {
				//uni.navigateBack()//默认delta:1
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			onChange(e) {
				// console.log(e.minutes)
				this.timeData = e
				this.minutes = e.minutes
			},
			orderInfo() {
				this.$http('harryroom.getorderid', {
					ordersId: this.order_id
				}).then(r => {
					console.log(r)
					if (r.code == 200) {
						this.allArray = r.data
						this.order_info = r.data.orders
						var order_time = this.timeProcessing(r.data.orders.ordersTime)
						this.newtimes = order_time + 86400000 - this.newtime()

					} else {
						this.$u.toast(r.msg);
					}
				});
			},

			copys() {
				var value =
					uni.setClipboardData({
						data: this.order_info.ordersNumber,
						success: (result) => {
							this.$u.toast('复制成功');
						},
						fail: (error) => {
							this.$u.toast('网络出错');
						}
					})
			},
			timeProcessing(e) {
				let timeDate = e;
				let Time = new Date(timeDate);
				// console.log(Time)//Mon Jun 24 2019 11:08:48 GMT+0800 (中国标准时间)
				let timestemp = Time.getTime();
				// console.log(timestemp)//1561345728000
				return timestemp
			},
			newtime() {
				let timestamp = new Date().getTime();
				// console.log('timestamp', timestamp) // timestamp 1630398573129  毫秒
				return timestamp;
			},
			togos() {

				this.go('/pages/pay/pay?orderid=' + this.order_id)

			}
		},
	};
</script>

<style scoped lang="scss">
	.goPay {
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
	}

	.justify-end {
		align-items: center;
	}

	.c11 {
		display: flex;
		flex-direction: row-reverse;
		margin-top: -25rpx;
		color: #ff371d;
		font-size: 12px;
		font-family: ".AppleSystemUIFont";
	}

	.scroll {
		margin-top: 136rpx;
		height: calc(100vh - 250rpx);
	}

	.section_3 {
		margin-top: 10rpx;
		background-color: #1d6aff;
		border-radius: 3rpx;
		width: 6rpx;
		height: 28rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 45rpx 24.5rpx 157.5rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621628592893.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_2 {
		margin: -109rpx 24rpx 0;
		padding: 30rpx 22rpx 40rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		position: relative;
	}

	.section_4 {
		margin: 21rpx 24rpx 0;
		padding: 29rpx 22rpx 31rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_5 {
		margin: 20rpx 24rpx 0;
		margin-bottom: 90rpx;
		padding: 0 24rpx 34rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_6 {
		// padding: 34rpx 24rpx 34rpx 34rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin-top: 10rpx;
		background-color: #1d6aff;
		height: 104rpx;
		display: flex;
		align-items: center;
		padding-left: 34rpx;
		padding-right: 34rpx;
		background-color: #ffffff;
	}

	.group {
		z-index: 6;
		background-image: linear-gradient(to right, #2079FA, #2B9CFC, #2FAAFC);
		width: 100%;
		padding-top: 80rpx;
		padding-bottom: 10rpx;
		position: fixed;
		// box-shadow: 0 1rpx 0 0 #64aff1;
	}

	.group_1 {
		margin-top: 43rpx;
	}

	.group_4 {
		margin-top: 38rpx;
	}

	.group_5 {
		margin-top: 31rpx;
	}

	.group_6 {
		margin-top: 25rpx;
	}

	.group_9 {
		margin-top: 39rpx;
	}

	.group_16 {
		padding: 28rpx 0 25rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_17 {
		margin-top: 29rpx;
	}

	.group_20 {
		margin-top: 31rpx;
	}

	.group_21 {
		// align-self: center;
		display: flex;
		height: 100%;
		align-items: center;
	}

	.image-wrapper {
		// padding: 12rpx 0 22rpx;
		background-color: #1d6aff;
		border-radius: 32rpx;
		width: 172rpx;
		height: 64rpx;
	}

	.image {
		position: absolute;
		left: 35rpx;
		bottom: 12rpx;
		width: 19rpx;
		height: 36rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_2 {
		height: 50rpx;
	}

	.image_1 {
		margin-right: 29.5rpx;
		width: 92rpx;
		height: 91rpx;
	}

	.text_3 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_4 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_5 {
		margin-right: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_6 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_7 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_8 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_9 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_8 {
		padding: 0 4rpx 23rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_11 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_10 {
		padding-bottom: 24rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_11 {
		padding-top: 30rpx;
	}

	.view_2 {
		margin-top: 7rpx;
	}

	.image_2 {
		margin-left: 17rpx;
		width: 132rpx;
		height: 40rpx;
	}

	.text_23 {
		margin-right: 267rpx;
		align-self: flex-end;
		color: #1c4ca8;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_19 {
		margin-top: 31rpx;
	}

	.text_26 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_27 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_3 {
		flex-shrink: 0;
		width: 36rpx;
		height: 35rpx;
	}

	.text_28 {
		margin-left: 18rpx;
		// margin-bottom: 8.5rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_4 {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		color: #ffffff;
		width: 100%;
		height: 100%;
	}

	.text_1 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_2 {
		margin-top: 16rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_10 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_12 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_13 {
		margin-right: -2rpx;
		margin-top: 6rpx;
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_13 {
		margin-top: 33rpx;
	}

	.group_14 {
		margin-top: 34rpx;
		padding-top: 27rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_21 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_22 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_24 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_25 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_14 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_15 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_16 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_17 {
		margin-top: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_18 {
		margin-right: 16rpx;
		margin-top: 7rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_15 {
		height: 38rpx;
	}

	.text_19 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_20 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}
</style>
